import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Select, InputNumber } from 'antd';
import React from 'react';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import { ListItem } from '../data';

export interface FormValueType extends Partial<ListItem> {
  id?: number;
  name?: string;
  remark?: string;
  type?: string;
  nickname?: string;
  rank_num?: string;
  is_enable?:any;
}

export interface UpdateFormProps extends FormComponentProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => void;
  updateModalVisible: boolean;
  values: Partial<ListItem>;
  otherValues: any;
}
const FormItem = Form.Item;
const { TextArea } = Input;

export interface UpdateFormState {
  formVals: FormValueType;
  currentStep: number;
}

const UpdateForm: React.FC<UpdateFormProps> = props => {

    const { updateModalVisible, onSubmit: handleUpdate, onCancel, values, form, otherValues } = props;

    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        // form.resetFields();
        fieldsValue.id = values.id;
        handleUpdate(fieldsValue);
      });
    };

    console.log('values --->', values);

    return (
      <Modal
        destroyOnClose
        title="编辑角色"
        visible={updateModalVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={'角色名称'}>
          {form.getFieldDecorator('name', {
            initialValue: values.name || '',
            rules: [{required: true, message: '名称不能为空'}],
          })(<Input placeholder="" />)}
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={'角色标识'}>
          {form.getFieldDecorator('nickname', {
            initialValue: values.nickname || '',
            rules: [{required: true, message: '变量标识不能为空'}],
          })(<Input placeholder=""/>)}
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={'描述'}>
          {form.getFieldDecorator('remark', {
            initialValue: values.remark || '',
            rules: [],
          })(<TextArea rows={2} placeholder="" />)}
        </FormItem>
      </Modal>
    );

}

export default Form.create<UpdateFormProps>()(UpdateForm);
